<%- include('includes/head.ejs') %>
<link rel="stylesheet" href="/css/product.css"/>
</head>

<body>
<%- include('includes/navigation.ejs') %>

<main>

    <% if(prods.length>0){ %>
        <div class="grid">
            <% for (let product of prods) { %>
            <article class="card product-item">
                <header class="card__header">
                    <h1 class="product__title"><%= product.title %></h1>
                </header>
                <div class="card__image">
                    <img src="https://cdn.pixabay.com/photo/2016/03/31/20/51/book-1296045_960_720.png" alt="A Book">
                </div>
                <div class="card__content">
                    <h2 class="product__price">$19.99</h2>
                    <p class="product__description">A very interesting book about so many even more interesting things!</p>
                </div>
                <div class="card__actions">
                    <button class="btn">Add to Cart</button>
                </div>
            </article>
                <% } %>
        </div>
    <%} else{ %>

        <h1>My Products</h1>
        <p>List of all the products...</p>
    <% }%>

</main>

<%- include('includes/end.ejs') %>
